<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>斗地主后台管理</title>
    <link rel="stylesheet" th:href="@{/js/lib/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/js/lib/fontawesome/css/all.min.css}">
    <link rel="stylesheet" th:href="@{/css/admin.css}">
</head>
<body>
    <!-- 添加消息提示容器 -->
    <div class="game-alert"></div>

    <div class="admin-container">
        <!-- 侧边栏 -->
        <div class="sidebar">
            <div class="sidebar-header">
                <h4><i class="fas fa-chess-king"></i> 斗地主管理后台</h4>
            </div>
            <ul class="nav-menu">
                <li class="nav-item active" data-tab="dashboard">
                    <i class="fas fa-tachometer-alt"></i>仪表盘
                </li>
                <li class="nav-item" data-tab="users">
                    <i class="fas fa-users"></i>用户管理
                </li>
                <li class="nav-item" data-tab="rooms">
                    <i class="fas fa-door-open"></i>房间管理
                </li>
                <li class="nav-item" data-tab="shop">
                    <i class="fas fa-store"></i>商城管理
                </li>
                <li class="nav-item" data-tab="system">
                    <i class="fas fa-cogs"></i>系统设置
                </li>
            </ul>
        </div>

        <!-- 主内容区域 -->
        <div class="main-content">
            <!-- 仪表盘 -->
            <div id="dashboard" class="content-section">
                <div class="content-header">
                    <h2><i class="fas fa-tachometer-alt"></i> 仪表盘</h2>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        <div class="stat-card">
                            <h3>在线用户</h3>
                            <div class="stat-value" id="onlineUsers">0</div>
                            <small class="text-muted">实时在线人数</small>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stat-card">
                            <h3>活跃房间</h3>
                            <div class="stat-value" id="activeRooms">0</div>
                            <small class="text-muted">当前游戏房间数</small>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stat-card">
                            <h3>今日注册</h3>
                            <div class="stat-value" id="todayRegisters">0</div>
                            <small class="text-muted">新增注册用户</small>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stat-card">
                            <h3>系收入</h3>
                            <div class="stat-value" id="systemIncome">0</div>
                            <small class="text-muted">今日系统收入(积分)</small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 用户管理 -->
            <div id="users" class="content-section" style="display: none;">
                <div class="content-header">
                    <h2><i class="fas fa-users"></i> 用户管理</h2>
                </div>
                <div class="search-box">
                    <input type="text" class="form-control" id="userSearch" placeholder="搜索户...">
                </div>
                <div class="data-table">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>用户名</th>
                                <th>积分</th>
                                <th>注册时间</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="usersList">
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- 房间管理 -->
            <div id="rooms" class="content-section" style="display: none;">
                <div class="content-header">
                    <h2><i class="fas fa-door-open"></i> 房间管理</h2>
                </div>
                <div class="data-table">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>房间ID</th>
                                <th>房主</th>
                                <th>玩家数</th>
                                <th>状态</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="roomsList">
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- 商城管理 -->
            <div id="shop" class="content-section" style="display: none;">
                <div class="content-header">
                    <h2><i class="fas fa-store"></i> 商城管理</h2>
                    <button class="btn btn-primary" onclick="showAddItemModal()">
                        <i class="fas fa-plus"></i> 添加商品
                    </button>
                </div>
                <div class="data-table">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>图片</th>
                                <th>商品名称</th>
                                <th>描述</th>
                                <th>价格</th>
                                <th>类型</th>
                                <th>状态</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="shopItemsList">
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- 系统设置 -->
            <div id="system" class="content-section" style="display: none;">
                <div class="content-header">
                    <h2><i class="fas fa-cogs"></i> 系统设置</h2>
                </div>
                <div class="card">
                    <div class="card-body">
                        <form id="systemSettingsForm">
                            <div class="mb-3">
                                <label class="form-label">初始积分</label>
                                <input type="number" class="form-control" id="initialScore">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">每局底分</label>
                                <input type="number" class="form-control" id="baseScore">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">出牌时限(秒)</label>
                                <input type="number" class="form-control" id="playTimeout">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">准备时限(秒)</label>
                                <input type="number" class="form-control" id="readyTimeout">
                            </div>
                            <button type="submit" class="btn btn-primary">保存设置</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加/编辑商品模态框 -->
    <div class="modal fade" id="itemModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="itemModalTitle">添加商品</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="itemForm">
                        <input type="hidden" id="itemId">
                        <div class="mb-3">
                            <label class="form-label">商品名称</label>
                            <input type="text" class="form-control" id="itemName" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">商品描述</label>
                            <textarea class="form-control" id="itemDescription"></textarea>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">价格</label>
                            <input type="number" class="form-control" id="itemPrice" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">商品图片</label>
                            <div class="input-group">
                                <input type="file" class="form-control" id="itemImageFile" accept="image/*">
                                <button class="btn btn-outline-secondary" type="button" onclick="uploadImage()">上传</button>
                            </div>
                            <input type="hidden" id="itemImageUrl">
                            <div id="imagePreview" class="mt-2" style="display: none;">
                                <img src="" alt="预览图" style="max-width: 200px; max-height: 200px;">
                            </div>
                            <small class="text-muted">支持jpg、png、gif格式的图片</small>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">商品类型</label>
                            <select class="form-select" id="itemType" required>
                                <option value="CARD_SKIN">卡牌皮肤</option>
                                <option value="CARD_BACK">卡牌背面</option>
                                <option value="AVATAR">头像</option>
                                <option value="AVATAR_FRAME">头像框</option>
                                <option value="EFFECT">特效</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">状态</label>
                            <select class="form-select" id="itemStatus">
                                <option value="true">上架</option>
                                <option value="false">下架</option>
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="saveItem()">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Toast 容器 -->
    <div id="toast-container" class="position-fixed top-0 end-0 p-3" style="z-index: 1050;"></div>

    <script th:src="@{/js/lib/jquery.min.js}"></script>
    <script th:src="@{/js/lib/bootstrap.bundle.min.js}"></script>
    <script th:src="@{/js/common.js}"></script>
    <script th:src="@{/js/admin.js}"></script>
</body>
</html> 